<template>
	<div id="app">
		<!--应用程序栏-->
		<v-app-bar app color="#FF5252">
			<v-list-item-title style="text-align: center;font-size:18px;color:white">收货地址</v-list-item-title>
			<v-btn elevation="0" small color="#FF5252" @click="go_address()" class="go_back">
				<icon name="back" scale="2" color="white"></icon>
			</v-btn>
		</v-app-bar>
		<div style="width: 90%;margin: 0 auto;">
			<div style="padding-top: 5%;">
				<icon name="warn" scale="2"></icon><span style="margin-left: 3%;">请把您的地址信息填完整哦！</span>
			</div>
			<v-form ref="form" v-model="valid" lazy-validation>
				<!-- 需要地区 -->
				<!-- 					<v-text-field v-model="name" :rules="nameRules" label="您的姓名" required></v-text-field>
					<v-text-field v-model="phone" :rules="phoneRules" label="手机号码" required></v-text-field> -->
				<v-text-field v-model="name" validate-on-blur :rules="[rules.nameRules,rules.checkIName]" label="姓名" placeholder=""></v-text-field>
				<v-text-field v-model="phone" validate-on-blur :rules="[rules.phoneRules,rules.phone]" label="手机号" placeholder=""></v-text-field>
				<v-text-field v-model="address_del" validate-on-blur :rules="[rules.addressRules]" label="详细地址" placeholder=""></v-text-field>
				<div style="padding-top: 3vh;"></div>
				<v-btn block color="#FF5252" :disabled="!valid" class="mr-4" @click="validate" style="font-size: 18px;color:white;">
					保存
				</v-btn>
			</v-form>
		</div>
		<v-snackbar v-model="snackbar" bottom :timeout="timeout">
			{{ message }}
		</v-snackbar>

	</div>
</template>

<script>
	import axios from "axios";

	export default {
		name: "AddressAdd",
		data() {
			return {
				name: '',
				phone: '',
				address_del: '',
				valid: true,
				snackbar: false,
				message: '',
				timeout: 2000,
				address_id: this.$route.query.address_id,
				rules: {
					nameRules: value => !!value || "请输入姓名",
					phoneRules: value => !!value || "请输入手机号码",
					addressRules: value => !!value || "请输入详细地址",
					checkIName: value => {
						const pattern = /^([\u4e00-\u9fa5]){2,7}$/;
						return pattern.test(value) || "真实姓名格式错误";
					},
					phone: value => {
						const pattern = /^1([345789][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
						return pattern.test(value) || "手机账号格式错误";
					}
				},
			}
		},
		methods: {
			validate() {
				if (this.$refs.form.validate()) {
					let _this = this;
					if (this.address_id !== '') {
						axios
							.post("/api/v1.0/users/add_address", {
								name: this.name,
								address: this.address_del,
								phone: this.phone,
								address_id: this.address_id
							})
							.then(function(response) {
								if (response.data.errno === '0') {
									_this.snackbar = true;
									_this.message = response.data.errmsg;
									setTimeout(function() {
										_this.$router.go(-1)
									}, 1000);
								} else if (response.data.errno === '4101') {
									// 未登跳转到登录页面
									_this.goLogin()
								}
							})
							.catch(function() {
								_this.message = "连接服务器失败！";
							});
					} else {
						axios
							.post("/api/v1.0/users/add_address", {
								name: this.name,
								address: this.address_del,
								phone: this.phone,
							})
							.then(function(response) {
								if (response.data.errno === '0') {
									_this.snackbar = true;
									_this.message = response.data.errmsg;
									setTimeout(function() {
										_this.go_address()
									}, 1000);
								} else if (response.data.errno === '4101') {
									// 未登跳转到登录页面
									_this.goLogin()
								}
							})
							.catch(function() {
								_this.message = "连接服务器失败！";
							});
					}
				}
			},
			reset() {
				this.$refs.form.reset()
			},
			resetValidation() {
				this.$refs.form.resetValidation()
			},
			go_address() {
				this.$router.go(-1)
			}
		},
		mounted() {
			if (this.address_id !== '') {
				console.log(this.address_id)
				let _this = this;
				axios
					.get("/api/v1.0/users/edit_address", {
						params: {
							address_id: _this.address_id
						}
					})
					.then(function(response) {
						if (response.data.errno === '0') {
							console.log(response.data.data);
							_this.address_del = response.data.data.address;
							_this.phone = response.data.data.phone;
							_this.name = response.data.data.name;
						} else if (response.data.errno === '4101') {
							// 未登跳转到登录页面
							_this.snackbar = true;
							_this.message = response.data.errmsg;
							setTimeout(function() {
								_this.$router.replace({
									path: "/login"
								});
							}, 1000);
						} else {
							console.log(response.data);
						}
					})
					.catch(function() {
						_this.message = "连接服务器失败！";
					});
			}
		},
	}
</script>

<style scoped>
	.top_button {
		width: 80%;
		font-size: 15px;
		background: #FF5252;
		height: 4vh;
		text-align: center;
		color: #FFFFFF;
	}
</style>
